<!--
 * @Author: your name
 * @Date: 2020-09-21 16:48:12
 * @LastEditTime: 2020-09-21 16:48:44
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \tinkjsDemo\antd-vue-pro\src\views\pageTest\css.vue
-->
<template>
    <div>
        <div class="wrap">
			<div class="header">头部标题</div>
			<div class="wrapper">
				<div class="left">
					<div class="cl">1</div>
					<div class="cl">2</div>
					<div class="cl">3</div>
				</div>
				<div class="middle">
					<div class="cl">4</div>
					<div class="cl">5</div>
					<div class="cl">6</div>
					<div class="cl">7</div>
				</div>
				<div class="right">
					<div class="cl">8</div>
					<div class="cl">9</div>
				</div>
			</div>
		</div>		
    </div>
</template>

<script>
export default {
    data(){
        return{

        }
    }
}
</script>


<style lang="scss">
    * {
				margin: 0;
				padding: 0;
			}
			html, body {
				height: 100%;
			}
			.wrap {
				height: 100%;
				flex-flow: column;
				display:flex;
			}
			.header {
				height: 30px;
				line-height: 30px;
				background: pink;
			}
			.wrapper {
				flex: 1;			
				display:flex;
				border: 1px solid blue;
			}
			.left, .middle, .right {
				flex: 1;
				display:flex;
				flex-flow: column;
				padding: 5px 0;
			}
			.cl {
				border: 1px solid pink;
				flex: 1;
				margin: 5px;
			}
</style>